<template>
<!--  direction="vertical"-->
      <h2 style="text-align: center">在册律师目录</h2>
      <el-descriptions
                :column="4"
                border
                style="width:75%;position: absolute;left: 15% "
      >

            <template v-for="item in descriptionData" :key="item.id">
                  <el-descriptions-item label="姓名" >{{item.name}}</el-descriptions-item>
                  <el-descriptions-item label="手机号">{{item.num}}</el-descriptions-item>
                  <el-descriptions-item label="主要执业类型">
                              <el-tag
                                        :type=" item.classify === '0' ? 'primary' :(item.classify=== '1' ? 'success': 'danger' )"
                                        disable-transitions
                              >{{ item.classify=== '0' ? '民事案件' :(item.classify=== '1' ? '刑事案件': '行政案件' ) }}
                              </el-tag
                              >
                  </el-descriptions-item>
                  <el-descriptions-item label="联系律师" >
                              <el-button type="success" @click="lawyerFind">提交案由</el-button>
                                          </el-descriptions-item>
                  <el-descriptions-item label="证书类型">
                        <el-tag size="large">
                              {{ item.credential=== '0' ? '法考A证' :(item.classify=== '1' ? '法考B证':'法考C证' ) }}
                        </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="简介" :span="5">
                        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
                  </el-descriptions-item>
                  <el-descriptions-item :span="5">
                        <el-divider border-style="dashed" />
                  </el-descriptions-item>
            </template>
      </el-descriptions>
</template>

<script>
export default {
      name: "lawyerFind",
      data() {
            return {
                  form: {
                        id: '',
                        name: '',
                        password: '',
                        card: '',
                        classify: '',
                        credential: '',
                        state: '',
                        num: '',
                        crenum: '',
                        img: ''
                  },
                  descriptionData: []
            }
      },
      methods: {
            loadGet() {
                  this.$axios('http://localhost:8088/lawyer/list/').then(res => res.data).then(res => {
                        console.log(res)
                        this.descriptionData = res
                        console.log(this.descriptionData)
                  })
            },
            lawyerFind(){
                  this.$router.push("/lawyerApply")
            }
      },
      mounted() {
            this.loadGet();
      }
}

</script>

<style scoped>
.el-descriptions {
      margin-top: 20px;
}
</style>